<template>
    <VZPanel title="工厂质量表现"  iconText="mdi-finance" height="fit" rounded="md" primaryColor="#0f3a5f" style="background-color:#0f3a5f;">
      <v-row align="center" >
        <v-col cols="2">
          <v-combobox  v-model="companyCode" :items="companyItems" label="公司" dark ></v-combobox>
        </v-col>
        <v-col cols="2">
          <v-select :items="years" label="年份" v-model="year" dark></v-select>
        </v-col>
        <v-col cols="3">
          <!--<v-btn class="ma-1" outlined color="#8D9957" @click="search"><v-icon>mdi-magnify</v-icon>查询</v-btn>-->
          <v-btn class="ma-1" outlined color="#8D9957" @click="reset"><v-icon >mdi-refresh</v-icon>重置</v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="7">
          <svg  viewBox="60 35 400 400" width="100%" height="65vh" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <g id="triangle">
                <polygon points="30,0 60,50 0,50" style="stroke:#0b3048; stroke-width:1;"/>
              </g>
              <g id="triangle1">
                <polygon points="30,0 60,50 90,0" style="stroke:#0b3048; stroke-width:1;"/>
              </g>
  
              <g id="trangle">
                <polygon points="30,0 0,50 180,50 150,0" fill="#0d293c" style="stroke:#0b3048; stroke-width:1;"/>
              </g>
  
              <g id="rectangle">
                <rect x="10" y="40" rx="1" ry="1" width="60" height="35" stroke="#0b3048" stroke-width="1" />
              </g>
  
  
              <g id="circle">
                <circle cx="16" cy="16" r="8" />
              </g>
            </defs>
  
  
            <g transform="translate(0 50)">
              <use id="month-use-01" name="month" :fill="monthColor1" xlink:href="#rectangle"/>
              <text id="month-text-01" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">1月</text>
            </g>
            <g transform="translate(0 86)">
              <use id="month-use-02" name="month" :fill="monthColor2" xlink:href="#rectangle" />
              <text id="month-text-02" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">2月</text>
            </g>
            <g transform="translate(0 121)">
              <use id="month-use-03" name="month" :fill="monthColor3" xlink:href="#rectangle" />
              <text id="month-text-03" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">3月</text>
            </g>
            <g transform="translate(0 156)">
              <use id="month-use-04" name="month" :fill="monthColor4" xlink:href="#rectangle" />
              <text id="month-text-04" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">4月</text>
            </g>
            <g transform="translate(0 191)">
              <use id="month-use-05" name="month" :fill="monthColor5" xlink:href="#rectangle" />
              <text id="month-text-05" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">5月</text>
            </g>
            <g transform="translate(0 226)">
              <use id="month-use-06" name="month" :fill="monthColor6" xlink:href="#rectangle" />
              <text id="month-text-06" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">6月</text>
            </g>
  
  
            <g transform="translate(440 50)">
              <use id="month-use-07" name="month" :fill="monthColor7" xlink:href="#rectangle" />
              <text id="month-text-07" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">7月</text>
            </g>
            <g transform="translate(440 86)">
              <use id="month-use-08" name="month" :fill="monthColor8" xlink:href="#rectangle" />
              <text id="month-text-08" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">8月</text>
            </g>
            <g transform="translate(440 121)">
              <use id="month-use-09" name="month" :fill="monthColor9" xlink:href="#rectangle" />
              <text id="month-text-09" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">9月</text>
            </g>
            <g transform="translate(440 156)">
              <use id="month-use-10" name="month" :fill="monthColor10" xlink:href="#rectangle" />
              <text id="month-text-10" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">10月</text>
            </g>
            <g transform="translate(440 191)">
              <use id="month-use-11" name="month" :fill="monthColor11" xlink:href="#rectangle" />
              <text id="month-text-11" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">11月</text>
            </g>
            <g transform="translate(440 226)">
              <use id="month-use-12" name="month" :fill="monthColor12" xlink:href="#rectangle" />
              <text id="month-text-12" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">12月</text>
            </g>
  
            <g transform="translate(230 30)">
              <use id="day-use-31" name="day" :fill="dayColor31" xlink:href="#triangle" />
              <text id="day-text-31" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="16">31</text>
            </g>
  
  
            <g transform="translate(200 80)">
              <use id="day-use-28" name="day" :fill="dayColor28" xlink:href="#triangle" />
              <text id="day-text-28" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">28</text>
            </g>
            <g transform="translate(200 80)">
              <use id="day-use-29" name="day" :fill="dayColor29" xlink:href="#triangle1" />
              <text id="day-text-29" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">29</text>
            </g>
            <g transform="translate(260 80)">
              <use id="day-use-30" name="day" :fill="dayColor30" xlink:href="#triangle" />
              <text id="day-text-30" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="16">30</text>
            </g>
  
  
  
            <g transform="translate(170 130)">
              <use xlink:href="#trangle" />
              <text fill="#fffff3" font-size="26" dx="30" dy="35" font-family="黑体" textLength="120">{{current_year_month}}</text>
            </g>
  
  
  
            <g transform="translate(140 180)">
              <use id="day-use-21" name="day" :fill="dayColor21" xlink:href="#triangle" />
              <text id="day-text-21" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">21</text>
            </g>
            <g transform="translate(140 180)">
              <use id="day-use-22" name="day" :fill="dayColor22" xlink:href="#triangle1" />
              <text id="day-text-22" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">22</text>
            </g>
            <g transform="translate(200 180)">
              <use id="day-use-23" name="day" :fill="dayColor23" xlink:href="#triangle" />
              <text id="day-text-23" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">23</text>
            </g>
            <g transform="translate(200 180)">
              <use id="day-use-24" name="day" :fill="dayColor24" xlink:href="#triangle1" />
              <text id="day-text-24" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">24</text>
            </g>
            <g transform="translate(260 180)">
              <use id="day-use-25" name="day" :fill="dayColor25" xlink:href="#triangle" />
              <text id="day-text-25" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">25</text>
            </g>
            <g transform="translate(260 180)">
              <use id="day-use-26" name="day" :fill="dayColor26" xlink:href="#triangle1" />
              <text id="day-text-26" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">26</text>
            </g>
            <g transform="translate(320 180)">
              <use id="day-use-27" name="day" :fill="dayColor27" xlink:href="#triangle" />
              <text id="day-text-27" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">27</text>
            </g>
  
  
  
  
  
            <g transform="translate(110 230)">
              <use id="day-use-12" name="day" :fill="dayColor12" xlink:href="#triangle" />
              <text id="day-text-12" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">12</text>
            </g>
            <g transform="translate(110 230)">
              <use id="day-use-13" name="day" :fill="dayColor13" xlink:href="#triangle1" />
              <text id="day-text-13" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">13</text>
            </g>
            <g transform="translate(170 230)">
              <use id="day-use-14" name="day" :fill="dayColor14" xlink:href="#triangle" />
              <text id="day-text-14" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">14</text>
            </g>
            <g transform="translate(170 230)">
              <use id="day-use-15" name="day" :fill="dayColor15" xlink:href="#triangle1" />
              <text id="day-text-15" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">15</text>
            </g>
            <g transform="translate(230 230)">
              <use id="day-use-16" name="day" :fill="dayColor16" xlink:href="#triangle" />
              <text id="day-text-16" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">16</text>
            </g>
            <g transform="translate(230 230)">
              <use id="day-use-17" name="day" :fill="dayColor17" xlink:href="#triangle1" />
              <text id="day-text-17" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">17</text>
            </g>
            <g transform="translate(290 230)">
              <use id="day-use-18" name="day" :fill="dayColor18" xlink:href="#triangle" />
              <text id="day-text-18" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">18</text>
            </g>
            <g transform="translate(290 230)">
              <use id="day-use-19" name="day" :fill="dayColor19" xlink:href="#triangle1" />
              <text id="day-text-19" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">19</text>
            </g>
            <g transform="translate(350 230)">
              <use id="day-use-20" name="day" :fill="dayColor20" xlink:href="#triangle" />
              <text id="day-text-20" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">20</text>
            </g>
  
  
            <g transform="translate(80 280)">
              <use id="day-use-01" name="day" :fill="dayColor1" xlink:href="#triangle" />
              <text id="day-text-01" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="10">1</text>
            </g>
            <g transform="translate(80 280)">
              <use id="day-use-02" name="day" :fill="dayColor2" xlink:href="#triangle1" />
              <text id="day-text-02" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">2</text>
            </g>
            <g transform="translate(140 280)">
              <use id="day-use-03" name="day" :fill="dayColor3" xlink:href="#triangle" />
              <text id="day-text-03" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">3</text>
            </g>
            <g transform="translate(140 280)">
              <use id="day-use-04" name="day" :fill="dayColor4" xlink:href="#triangle1" />
              <text id="day-text-04" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">4</text>
            </g>
            <g transform="translate(200 280)">
              <use id="day-use-05" name="day" :fill="dayColor5" xlink:href="#triangle" />
              <text id="day-text-05" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">5</text>
            </g>
            <g transform="translate(200 280)">
              <use id="day-use-06" name="day" :fill="dayColor6" xlink:href="#triangle1" />
              <text id="day-text-06" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">6</text>
            </g>
            <g transform="translate(260 280)">
              <use id="day-use-07" name="day" :fill="dayColor7" xlink:href="#triangle" />
              <text id="day-text-07" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">7</text>
            </g>
            <g transform="translate(260 280)">
              <use id="day-use-08" name="day" :fill="dayColor8" xlink:href="#triangle1" />
              <text id="day-text-08" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">8</text>
            </g>
            <g transform="translate(320 280)">
              <use id="day-use-09" name="day" :fill="dayColor9" xlink:href="#triangle" />
              <text id="day-text-09" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">9</text>
            </g>
            <g transform="translate(320 280)">
              <use id="day-use-10" name="day" :fill="dayColor10" xlink:href="#triangle1" />
              <text id="day-text-10" name="day" fill="#fffff3" font-size="18" dx="52" dy="28" font-family="黑体" textLength="16">10</text>
            </g>
            <g transform="translate(380 280)">
              <use id="day-use-11" name="day" :fill="dayColor11" xlink:href="#triangle" />
              <text id="day-text-11" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="16">11</text>
            </g>
  
            <g transform="translate(70 335)">
              <use fill="#fa5647" xlink:href="#circle" />
              <text fill="#fa5647" font-size="14" dx="30" dy="22" font-family="黑体" textLength="150">客户受控发运问题(CS1/CS2)</text>
            </g>
            <g transform="translate(270 335)">
              <use  fill="#FBC02D" xlink:href="#circle" />
              <text fill="#FBC02D" font-size="14" dx="30" dy="22" font-family="黑体" textLength="145">客户书面抱怨问题(QR)</text>
            </g>
            <g transform="translate(145 360)">
              <use fill="#3eff6f" xlink:href="#circle" />
              <text fill="#3eff6f" font-size="14" dx="25" dy="22" font-family="黑体" textLength="200">客户一般抱怨问题/内部质量问题</text>
            </g>
  
  
          </svg>
        </v-col>
  
        <v-col cols="5">
          <v-row style="padding-top:1vh" align-content="center" justify="center">
            <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('')">
              <v-col class="text-subtitle-1 text-center"  cols="11">
                <span style="font-weight:bold;font-size:20px"><v-icon>mdi-set-all</v-icon>  当月问题总数:{{count_num}}</span>
              </v-col>
              <v-col cols="11" style="padding:0">
                <v-progress-linear rounded striped :value="count_rate" color="#8D9957" height="8vh">
                  <template v-slot:default="{ value }">
                    <strong>{{ value }}%</strong>
                  </template>
                </v-progress-linear>
              </v-col>
            </v-card>
            <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('A')">
              <v-col class="text-subtitle-1 text-center"  cols="11">
                <span style="font-weight:bold;font-size:20px">客户受控发运问题(CS1/CS2):{{a_num}}</span>
              </v-col>
              <v-col cols="11" style="padding:0">
                <v-progress-linear rounded striped :value="a_rate" color="#fa5647" height="8vh">
                  <template v-slot:default="{ value }">
                    <strong>{{ value }}%</strong>
                  </template>
                </v-progress-linear>
              </v-col>
            </v-card>
            <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('B')">
              <v-col class="text-subtitle-1 text-center"  cols="11">
                <span style="font-weight:bold;font-size:20px">客户书面抱怨问题(QR):{{b_num}}</span>
              </v-col>
              <v-col cols="11" style="padding:0">
                <v-progress-linear rounded :value="b_rate" color="#FBC02D" height="8vh">
                  <template v-slot:default="{ value }">
                    <strong>{{ value }}%</strong>
                  </template>
                </v-progress-linear>
              </v-col>
            </v-card>
            <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('C')">
              <v-col class="text-subtitle-1 text-center"  cols="11">
                <span style="font-weight:bold;font-size:20px">客户一般抱怨问题/内部质量问题:{{c_num}}</span>
              </v-col>
              <v-col cols="11" style="padding:0">
                <v-progress-linear rounded :value="c_rate"  color="#218508" height="8vh">
                  <template v-slot:default="{ value }">
                    <strong>{{ value }}%</strong>
                  </template>
                </v-progress-linear>
              </v-col>
            </v-card>
          </v-row>
        </v-col>
      </v-row>
  
    </VZPanel>
  </template>
  <script>
  export default {
    data () {
      return {
        companyItems:[],
        companyCode:'',
        years:[],
        year:new Date().getFullYear(),
        /*      current_year_month:this.year+'年'+this.month+'月',*/
        month:new Date().getMonth() + 1,
        day:'',
        count_rate:'60',
        count_num:120,
        a_rate:70,
        a_num:60,
        b_rate:85.23,
        b_num:43,
        c_rate:67.56,
        c_num:150,
        monthColor1:'#0d293c00',
        monthColor2:'#0d293c00',
        monthColor3:'#0d293c00',
        monthColor4:'#0d293c00',
        monthColor5:'#0d293c00',
        monthColor6:'#0d293c00',
        monthColor7:'#0d293c00',
        monthColor8:'#0d293c00',
        monthColor9:'#0d293c00',
        monthColor10:'#0d293c00',
        monthColor11:'#0d293c00',
        monthColor12:'#0d293c00',
  
        dayColor1:'#0d293c00',
        dayColor2:'#0d293c00',
        dayColor3:'#0d293c00',
        dayColor4:'#0d293c00',
        dayColor5:'#0d293c00',
        dayColor6:'#0d293c00',
        dayColor7:'#0d293c00',
        dayColor8:'#0d293c00',
        dayColor9:'#0d293c00',
        dayColor10:'#0d293c00',
        dayColor11:'#0d293c00',
        dayColor12:'#0d293c00',
        dayColor13:'#0d293c00',
        dayColor14:'#0d293c00',
        dayColor15:'#0d293c00',
        dayColor16:'#0d293c00',
        dayColor17:'#0d293c00',
        dayColor18:'#0d293c00',
        dayColor19:'#0d293c00',
        dayColor20:'#0d293c00',
        dayColor21:'#0d293c00',
        dayColor22:'#0d293c00',
        dayColor23:'#0d293c00',
        dayColor24:'#0d293c00',
        dayColor25:'#0d293c00',
        dayColor26:'#0d293c00',
        dayColor27:'#0d293c00',
        dayColor28:'#0d293c00',
        dayColor29:'#0d293c00',
        dayColor30:'#0d293c00',
        dayColor31:'#0d293c00',
  
  clickReset:false,
      }
    },
    methods: {
      search(){
        this.loadMonthColorData();
        this.loadDayColorData();
        this.loadRateData();
        this.clickReset = false;
      },
      reset(){
          this.clickReset = true;
        this.companyCode='',
            this.year = new Date().getFullYear();
        this.month = new Date().getMonth() + 1;
        this.search();
      },
      getMonthInYear() {
        if(this.year < new Date().getFullYear()){
          return 12;
        }else{
          return new Date().getMonth() + 1
        }
      },
      getDayInMonth() {
        if(this.year < new Date().getFullYear()){
          return new Date(this.year, this.month, 0).getDate();
        }else{
          if(this.month < new Date().getMonth() + 1){
            return new Date(this.year, this.month, 0).getDate();
          }else{
            return new Date().getDate();
          }
        }
      },
      clickMonth(month){
        let m = month.split('-')[2];
        if(m <= this.getMonthInYear()){
          this.month = parseInt(m);
          this.loadDayColorData();
          this.loadRateData();
        }
      },
      clickDay(day){
        let d = day.split('-')[2];
        if(d <= this.getDayInMonth()){
          this.day = d;
          console.log(this);
          this.$emit('toPage','v82d136d35048a4a1b63c8259c4', {problem_happen_date:this.year_month_day});
        }
      },
      toMonthPage(severity){
        this.$emit('toPage','v82d136d35048a4a1b63c8259c4', {"happen_month":"'"+this.year_month+"'","severity":severity});
      },
      loadCompanyData() {
        let _this = this
        app.utils.ajaxRequest({
          hideMsg: true,
          hideMask: true,
          url: app.path().dispose + "?functionCode=QMS_COMPANY_SELECT",
          params: {},
          callBack(res) {
            if(res.success){
              let dataList = res.rows;
              let companyList = [];
              dataList.forEach((item) => {
                let map = {};
                map.text = item.company_name;
                map.value = item.company_code;
                companyList.push(map);
              })
              _this.companyItems = companyList;
            }
          },
        })
      },
      refreshMonthData(){
        this.monthColor1 = '#0d293c00';
        this.monthColor2 = '#0d293c00';
        this.monthColor3 = '#0d293c00';
        this.monthColor4 = '#0d293c00';
        this.monthColor5 = '#0d293c00';
        this.monthColor6 = '#0d293c00';
        this.monthColor7 = '#0d293c00';
        this.monthColor8 = '#0d293c00';
        this.monthColor9 = '#0d293c00';
        this.monthColor10 = '#0d293c00';
        this.monthColor11 = '#0d293c00';
        this.monthColor12 = '#0d293c00';
      },
      refreshDayData(){
        this.dayColor1 = '#0d293c00';
        this.dayColor2 = '#0d293c00';
        this.dayColor3 = '#0d293c00';
        this.dayColor4 = '#0d293c00';
        this.dayColor5 = '#0d293c00';
        this.dayColor6 = '#0d293c00';
        this.dayColor7 = '#0d293c00';
        this.dayColor8 = '#0d293c00';
        this.dayColor9 = '#0d293c00';
        this.dayColor10 = '#0d293c00';
        this.dayColor11 = '#0d293c00';
        this.dayColor12 = '#0d293c00';
  
        this.dayColor13 = '#0d293c00';
        this.dayColor14 = '#0d293c00';
        this.dayColor15 = '#0d293c00';
        this.dayColor16 = '#0d293c00';
        this.dayColor17 = '#0d293c00';
        this.dayColor18 = '#0d293c00';
        this.dayColor19 = '#0d293c00';
        this.dayColor20 = '#0d293c00';
        this.dayColor21 = '#0d293c00';
        this.dayColor22 = '#0d293c00';
        this.dayColor23 = '#0d293c00';
        this.dayColor24 = '#0d293c00';
  
        this.dayColor25 = '#0d293c00';
        this.dayColor26 = '#0d293c00';
        this.dayColor27 = '#0d293c00';
        this.dayColor28 = '#0d293c00';
        this.dayColor29 = '#0d293c00';
        this.dayColor30 = '#0d293c00';
        this.dayColor31 = '#0d293c00';
      },
          loadMonthColorData(){
        let _this = this;
        this.refreshMonthData();
        let months = this.getMonthInYear();
        app.utils.ajaxRequest({
          hideMsg: true,
          hideMask: true,
          url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_MONTH_DATA",
          params: {"queryCondition[year]":_this.year,"queryCondition[company_code]":_this.companyCode.value},
          callBack(res) {
            if(res.success && res.rows.length > 0) {
              let dataList = res.rows;
              for (let i = 1; i <= months; i++) {
                let severity = dataList[i - 1].severity;
                let type = dataList[i - 1].type;
                if (severity == "A") {
                  if (type == 'CS1' || type == 'CS2') {
                    _this["monthColor" + i] = '#fa5647';
                  } else if (type == 'QR') {
                    _this["monthColor" + i] = '#FBC02D';
                  } else {
                    _this["monthColor" + i] = '#218508';
                  }
                } else {
                  _this["monthColor" + i] = '#218508';
                }
              }
            }
          },
        })
      },
      loadDayColorData(){
        let _this = this;
        this.refreshDayData();
        let days = this.getDayInMonth();
        app.utils.ajaxRequest({
          hideMsg: true,
          hideMask: true,
          url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_DAY_DATA",
          params: {"queryCondition[year_month]":_this.year_month,"queryCondition[company_code]":_this.companyCode.value},
          callBack(res) {
            if(res.success && res.rows.length > 0){
              let dataList = res.rows;
              for(let i = 1;i <= days;i++){
                let severity = dataList[i-1].severity;
                let type = dataList[i - 1].type;
                if (severity == "A") {
                  if (type == 'CS1' || type == 'CS2') {
                    _this["dayColor" + i] = '#fa5647';
                  } else if (type == 'QR') {
                    _this["dayColor" + i] = '#FBC02D';
                  } else {
                    _this["dayColor" + i] = '#218508';
                  }
                } else {
                  _this["dayColor" + i] = '#218508';
                }
              }
            }
          },
        })
      },
      loadRateData(){
        let _this = this;
        app.utils.ajaxRequest({
          hideMsg: true,
          hideMask: true,
          url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_CLOSE_RATE",
          params: {"queryCondition[year_month]":_this.year_month,"queryCondition[company_code]":_this.companyCode.value},
          callBack(res) {
            if(res.success && res.rows.length > 0){
              let data = res.rows[0];
              _this.a_num = data.a_num;
              _this.b_num = data.b_num;
              _this.c_num = data.c_num;
              _this.count_num = data.a_num + data.b_num + data.c_num;
              
              let count_close_num = data.a_close_num + data.b_close_num + data.c_close_num;
  
              if(data.a_num == 0){
                _this.a_rate = 0;
              }else{
                _this.a_rate = parseFloat((data.a_close_num * 100)/data.a_num).toFixed(2);
              }
              if(data.b_num == 0){
                _this.b_rate = 0;
              }else{
                _this.b_rate = parseFloat((data.b_close_num * 100)/data.b_num).toFixed(2);
              }
              if(data.c_num == 0){
                _this.c_rate = 0;
              }else{
                _this.c_rate = parseFloat((data.c_close_num * 100)/data.c_num).toFixed(2);
              }
              if(_this.count_num == 0){
                  _this.count_rate = 0;
              }else{
                  _this.count_rate = parseFloat((count_close_num * 100)/_this.count_num).toFixed(2);
              }
            }
          },
        })
      },
    },
    created(){
      const year = new Date().getFullYear()
      const endYear = year ;
      const diff = year - 2024;
      for (let i = year - 4 - diff; i <= endYear; i++) {
        this.years.push(i)
      }
    },
    computed:{
      current_year_month:function(){
        return this.year+'年'+this.month+'月';
      },
      year_month:function(){
        return this.year+'-'+String(this.month).padStart(2, '0');
      },
      year_month_day:function(){
        return this.year+'-'+String(this.month).padStart(2, '0') + '-' +this.day;
      },
      current_days:function(){
        return new Date(this.year, this.month, 0).getDate();
      },
    },
    mounted () {
      let _this = this;
      this.loadCompanyData();
      var monthElement = document.querySelectorAll('[name="month"]');
      monthElement.forEach(function(element) {
        element.addEventListener('click', function(event) {
          _this.clickMonth(event.target.id);
        });
      });
  
      var dayElement = document.querySelectorAll('[name="day"]');
      dayElement.forEach(function(element) {
        element.addEventListener('click', function(event) {
          _this.clickDay(event.target.id);
        });
      });
      this.loadMonthColorData();
      this.loadDayColorData();
      this.loadRateData();
    },
    watch:{
        companyCode(newValue,oldValue){
            if(newValue != undefined && newValue != ''){
                this.search();
            }
        },
        year(newValue){
            if(!this.clickReset){
                this.search();
            }
        }
    },
    props: {
      prop:{type:String,desc:'基本参数'}
    }
  }
  </script>
  